<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        a {
            text-decoration: none;
        }

        .not-arrow{
            padding: 5px 10px;
            border:1px solid #dcd8d8;
            -webkit-appearance:none;
            -moz-appearance:none;
            appearance:none;
        }

        .not-arrow::-ms-expand { display: none; }

    </style>

</head>
<body>

<div id="app">

    <div class="demo-input-size">

        <el-input
                size="medium"
                placeholder="请输入姓名"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.name"
        >
        </el-input>
        <el-input
                size="medium"
                placeholder="请输入最小年龄"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.minAge"
        >
        </el-input>
        <el-input
                size="medium"
                placeholder="请输入最大年龄"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.maxAge"
        >
        </el-input>
        <el-input
                size="medium"
                placeholder="请输入地址"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.address"
        >
        </el-input>

        <el-button icon="el-icon-search" type="brand" circle @click="searchStu()" ></el-button>
        <el-button icon="el-icon-plus"    @click="showAddDialog()"    type="success" circle></el-button>

        <!--<el-button icon="el-icon-download"    @click="exportSta()"    type="danger" circle></el-button>-->

        <el-button size="medium" type="primary" round><a href="/ssm/staffcontrol/员工信息.xlsx" style="color: white">模板</a></el-button>
        <form id="upform">
            <input name="hehe" type="file">
        </form>
        <el-button icon="el-icon-upload2"    @click="uploadStu()"    type="warning" circle></el-button>

        <el-table
                :data="staArr"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>

            <el-table-column
                    prop="education"
                    label="学历">
            </el-table-column>
            <el-table-column
                    prop="telephone"
                    label="手机号">
            </el-table-column>
            <el-table-column
                    prop="role.rname"
                    label="职位">
            </el-table-column>
            <el-table-column
                    prop="branch.bname"
                    label="部门">
            </el-table-column>
            <el-table-column
                    prop="department.kname"
                    label="科室">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="showUpdateDialog(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="totalCount">
        </el-pagination>

        <el-dialog title="添加员工" :visible.sync="dialogFormVisible">
            <el-form  id="stuFrom" :model="staInfo" :rules="rules"  ref="staInfo"  >
                <el-form-item label="员工姓名"  prop="name">
                    <el-input v-model="staInfo.name" name="name" ></el-input>
                </el-form-item>
                <el-form-item label="员工地址"  prop="address">
                    <el-input v-model="staInfo.address" name="address" ></el-input>
                </el-form-item>
                <el-form-item label="员工年龄" prop="age" >
                    <el-input v-model="staInfo.age" name="age"  oninput="value=value.replace(/[^\d]/g,'')" ></el-input>
                </el-form-item>
                <el-form-item label="员工学历"  prop="education">
                    <el-input v-model="staInfo.education" name="education" ></el-input>
                </el-form-item>
                <el-form-item label="员工手机号"  prop="telephone">
                    <el-input v-model="staInfo.telephone"  name="telephone" ></el-input>
                </el-form-item>
                <el-form-item label="员工身份证"  prop="identity">
                    <el-input v-model="staInfo.identity"  name="identity" ></el-input>
                </el-form-item>
                <el-form-item label="入职时间"  prop="hiredate">
                    <el-input v-model="staInfo.hiredate" name="hiredate" ></el-input>
                </el-form-item>

                <el-form-item label="员工职位"  prop="rid">
                    <select v-model="staInfo.rid" placeholder="请选择员工职位" name="rid" class="not-arrow" >
                        <option  v-for="(r,i) in roleArr "  :label="r.rname" :value="r.id"></option>
                    </select>
                </el-form-item>
                <el-form-item label="员工科室"  prop="kid">
                    <select v-model="staInfo.kid" placeholder="请选择员工科室" name="kid" class="not-arrow" >
                        <option  v-for="(k,i) in departmentArr "  :label="k.kname" :value="k.id"></option>
                    </select>
                </el-form-item>
                <el-form-item label="员工部门"  prop="bid">
                    <select v-model="staInfo.bid" placeholder="请选择员工部门"  name="bid" class="not-arrow" >
                        <option  v-for="(b,i) in branchArr "  :label="b.bname" :value="b.id"></option>
                    </select>
                </el-form-item>

                <el-form-item label="员工头像" >
                    <img id="stuImg" width="50" height="50">
                    <input @change="chengImg()" id="foo" type="file" name="headImg"  />
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSta()">添 加</el-button>
            </div>
        </el-dialog>

    </div>

</div>


<script>

    var haha=new Vue({
        el:"#app",
        data:{
            searchInfo:{
                name:"",
                minAge:"",
                maxAge:"",
                address:""
            },
            staArr:[],
            roleArr:[],
            branchArr:[],
            departmentArr:[],
            totalCount:0,
            dialogFormVisible:false,
            staInfo:{},
            rules:{

                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
                education: [
                    { required: true, message: '请输入学历', trigger: 'blur' },
                ],
                identity: [
                    { required: true, message: '请输入身份证', trigger: 'blur' },
                ],
                hiredate: [
                    { required: true, message: '请输入入职时间', trigger: 'blur' },
                ],
                telephone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                ],
                rid: [
                    { required: true, message: '请选择职位', trigger: 'change' },
                ],
                kid: [
                    { required: true, message: '请选择科室', trigger: 'change' },
                ],
                bid: [
                    { required: true, message: '请选择部门', trigger: 'change' },
                ]
            }

        },
        methods:{

            uploadStu(){
                var stuData =  new FormData(upform);
                $.ajax({
                    url:"/ssm/stasource/upload",
                    type:"POST",
                    data:stuData,
                    processData:false,
                    contentType:false,
                    success:function(backData){
                    }
                });
            },

            chengImg(){
                var r = new FileReader();
                r.readAsDataURL(foo.files[0]);
                r.onload = function(){
                    stuImg.src=r.result;
                }

            },
            exportSta(){
                window.location.href=" /ssm/stasource/download?name="+haha.searchInfo.name+"&minAge="+haha.searchInfo.minAge+"&address="+haha.searchInfo.address+"&maxAge="+haha.searchInfo.maxAge+"&pageNo=1&pageCount=5000";
            },
            showUpdateDialog:function (id){
                window.location.href="/ssm/staffcontrol/update.html?id="+id;
            },

            addSta(){
                haha.$refs["staInfo"].validate((valid) => {
                    if (valid) {

                        var stuData = new FormData(stuFrom);

                        $.ajax({
                            url:"/ssm/sta/add",
                            type:"POST",
                            data:stuData,
                            processData:false,
                            contentType:false,
                            success:function(backData){
                                    haha.dialogFormVisible=false;
                                    haha.$refs["staInfo"].resetFields();
                                    haha.$message.success('添加成功');
                                    getData(1,10);
                            }
                        });

                    }
                });
            },
            showAddDialog(){
                $.get("/ssm/role/list",function (backData) {
                    haha.roleArr=backData.data;
                    $.get("/ssm/branch/liststate",function (backData) {
                        haha.branchArr=backData.data;
                        $.get("/ssm/department/liststate",function (backData) {
                                haha.departmentArr=backData.data;
                                haha.dialogFormVisible=true;
                        });

                    });

                });
            },
            searchStu(){
                getData(1,10);
            },
            handleCurrentChange( val ){
                getData(val,10);
            }
        }
    });

    function getData(a,b) {
        haha.searchInfo.pageNo=a;
        haha.searchInfo.pageCount=b;
        $.post("/ssm/sta/query",haha.searchInfo,function (backData) {
            haha.staArr=backData.data.currentData;
            haha.totalCount=backData.data.totalCount;
        });
    }

    getData(1,10);


</script>

</body>
</html>